<template>
  <div class="goods-comments">
    <nav-bar title="用户评价"
             bgColor="#eeeeee"
             textColor="#020202"></nav-bar>
    <div class="comments-type">
      <span v-for="(item,i) in type"
            :key="item"
            @click="changeType(i)"
            :class="activeType == i ? 'active-type' : ''">
        {{ item }}
      </span>
    </div>
    <div class="comments-list">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
        <user-comments v-for="item in 3"
                       :key="item"></user-comments>
      </van-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBarSecond'
import UserComments from '@/components/UserComments'
export default {
  data () {
    return {
      type: ['全部', '好评', '中评', '差评'],
      activeType: 0,
      list: [],
      loading: false,
      finished: false,
    };
  },
  components: {
    NavBar,
    UserComments
  },
  created () { },
  methods: {
    changeType (i) {
      this.activeType = i
    },
    onLoad () {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }

      this.loading = false;
      if (this.list.length >= 40) {
        this.finished = true;
      }
    },
  }
}

</script>
<style lang='scss' scoped>
.goods-comments {
  @include wh100;
  @include flex-column;
  background-color: #eeeeee;
  .comments-type {
    height: 0.8rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.2rem;
    span {
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      width: 1.5rem;
      border-radius: 1rem;
      background-color: #eeeeee;
      font-size: 0.26rem;
      color: #000000;
    }
    .active-type {
      background-color: #e85014;
      color: #ffffff;
    }
  }
  .comments-list {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    background-color: #ffffff;
    .user-comments {
      box-sizing: border-box;
      padding: 0.3rem 0.3rem 0.15rem 0.3rem;
      position: relative;
      &:after {
        position: absolute;
        bottom: 0;
        width: 94%;
        left: 3%;
        height: 1px;
        content: '';
        background: #c9c9c9;
      }
    }
  }
}
</style>